<template>
	<view class="box">
		<view class="planbox">
			<view class="tit">生词本</view>
			<view class="plan">
				<view class="v1">
					<text class="b1 cuIcon-apps">我的分组</text>
					<view class="b1 cuIcon-add" @click="fz">分组管理</view>
				</view>
				<view class="v1" @click="qb()">
					<view>全部生词</view>
					<view class="cuIcon-right"></view>
				</view>
				<view class="v1" v-for="(item,index) in fenzulist" :key="item.groupId" @click="fn(item.groupId)">
					<view>{{item.groupName}}</view>
					<view class="cuIcon-right"></view>
				</view>
			</view>
			<view class="plan">
				<view class="v1">
					<text class="b1 cuIcon-apps">错题记录</text>
					<view class="cuIcon-right"></view>
				</view>
			</view>
		</view>
		<tabbar flag1="3"></tabbar>
	</view>
</template>

<script>
	import {
		groupList
	} from "../../utils/fenzu.js"
	export default {
		data() {
			return {
				fenzulist: []
			}
		},
		onShow() {
			this.fenzu()
		},
		methods: {
			//根据分组id跳转单词列表
			fn(id) {
				uni.navigateTo({
					url: `../../pages/fenzulist/fenzulist?groupId=${id}`
				})
			},
			//分组列表
			async fenzu() {
				let id = this.$store.state.user.id
				console.log(id)
				if (id) {
					const {
						data: res
					} = await groupList(id)
					console.log(res.data)
					this.fenzulist = res.data
				} else {
					this.fenzulist = []
				}

			},
			//跳转分组管理页
			fz() {
				uni.navigateTo({
					url: '../../pages/fenzu/fenzu'
				})
			},
			qb() {
				if (this.$store.state.user.id) {
					const id = this.$store.state.user.id
					uni.navigateTo({
						url: `../../pages/fenzulist/fenzulist?id=${id}`
					})
				}

			}
		}
	}
</script>

<style scoped>
	.box {
		background: linear-gradient(#3F9D83, #3F9D83, #f4f4f4, #f4f4f4);
		padding-bottom: 25vh;
	}

	.planbox {
		padding-top: 10vh;
		margin: 0 15px;
	}

	.plan {
		background-color: #FFFFFF;
		margin-bottom: 10px;
		padding: 5vw;
		border-radius: 5px;
	}

	.v1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #f4f4f4;
	}

	.b1 {
		color: #3F9D83;
		font-weight: bold;
		font-size: 16px;
	}

	.tit {
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}
</style>
